<template>
	<div class="publicpageview">
		<div class="top">请选择批处理项</div>
		<div class="contents">
			<el-radio v-model="radio" label="1">管理形式及产别变更批处理</el-radio>
			<el-radio v-model="radio" label="2">注销变动操作批处理 </el-radio>
			<el-radio v-model="radio" label="3">待注销变动操作批处理</el-radio>
			<el-radio v-model="radio" label="4">自来水移交操作批处理</el-radio>
		</div>
		<div class="neirong">
			<div class="neirongDiv">
				<el-form label-width='120px'>
					<el-form-item label="使用性质：" prop="LivingWay">
						<el-select v-model="listQuery.LivingWay">
							<el-option label="住宅" value="住宅" key="1"></el-option>
							<el-option label="非住宅" value="非住宅" key="0"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div style="display: flex;">
					<div class="left">
						<div class="leftContent">
							<div :class="[index1==index ? 'textblue' : '']" v-for="(item,index) in guanpianList" :key="index"
								@click="selectSuo(item.groupnew,index)">{{item.groupnew}}</div>
						</div>
					</div>
					<div class="left2">
						<div class="leftContent2">
							<div :class="[index2==index ? 'textblue' : '']" v-for="(item,index) in suoList" :key="index"
								@click="selectSuo2(item.blockno,index)">{{item.blockno+'|'+item.blockgroup}}</div>
						</div>
					</div>
				</div>
			</div>
			<div style="height: 300px;border: 1px dashed #000;margin-left: 40px;"></div>

			<div class="neirongDiv" v-if="radio==1">
				<div style="display: flex;">
					<el-form label-width='120px'>
						<el-form-item label="管理形式：" prop="oldManageWay">
							<el-select v-model="listQuery.oldManageWay">
								<div v-for="(item,index) in guanlixingshiList" :key="index">
									<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-form>
					<el-form label-width='120px'>
						<el-form-item label="产别：" prop="oldOwnWay">
							<el-select v-model="listQuery.oldOwnWay">
								<div v-for="(item,index) in chanbieList" :key="index">
									<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
				<div style="text-align: center;">变更为</div>
				<div style="display: flex;margin-top: 20px;">
					<el-form label-width='120px'>
						<el-form-item label="管理形式：" prop="newManageWay">
							<el-select v-model="listQuery.newManageWay">
								<div v-for="(item,index) in guanlixingshiList" :key="index">
									<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-form>
					<el-form label-width='120px'>
						<el-form-item label="产别：" prop="newOwnWay">
							<el-select v-model="listQuery.newOwnWay">
								<div v-for="(item,index) in chanbieList" :key="index">
									<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="neirongDiv" v-if="radio==2">
				<div style="display: flex;">
					<el-form label-width='120px'>
						<el-form-item label="终止日期：" prop="StopDate">
							<el-date-picker v-model="listQuery.StopDate" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-form>
					<el-form label-width='120px'>
						<el-form-item label="终止原因：" prop="StopCause">
							<el-select v-model="listQuery.StopCause">
								<div v-for="(item,index) in zhongzhiList" :key="index">
									<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="neirongDiv" v-if="radio==3">
				<div style="display: flex;">
					<el-form label-width='120px'>
						<el-form-item label="变动日期：" prop="StopDate">
							<el-date-picker v-model="listQuery.StopDate" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-form>
					<el-form label-width='120px'>
						<el-form-item label="变动原因：" prop="StopCause">
							<el-select v-model="listQuery.StopCause">
								<div v-for="(item,index) in biandongList" :key="index">
									<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="neirongDiv" v-if="radio==4">
				<div style="display: flex;">
					<el-form label-width='120px'>
						<el-form-item label="移交日期：" prop="watertransferdate">
							<el-date-picker v-model="listQuery.watertransferdate" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<div class="bottomTop">
		  <el-button type="primary" size="mini" @click="save">确定</el-button>
		</div>

	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import * as XLSX from 'xlsx'
	import {
		blockGroupList,
		getBlockByGroup,
		cancelWayDP,
		changeDP,
		manageWayDP,
		waterDP
	} from '@/api/industry'
	export default {
		name: 'AccommodationManagementChanquanzhengjian',
		data() {
			return {
				listQuery: {
					LivingWay: '',
					groupNew: '',
					blockno: '',
					newManageWay: '',
					oldManageWay: '',
					oldOwnWay: '',
					StopDate: '',
					StopCause: '',
					watertransferdate:'',
					newOwnWay:''
				},
				radio: '1',
				guanpianList: [],
				suoList: [],
				index1: 99999,
				index2: 99999,
				chanbieList: [],
				guanlixingshiList: [],
				zhongzhiList: [],
				biandongList:[]
			}
		},
		watch: {
			'radio': {
				handler(newVal, oldVal) {
					console.log(newVal)
					this.listQuery.LivingWay = ''
					this.returnQuery()
				}
			}
		},
		computed: {},

		mounted() {
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '产别') {
					item.classmidList.forEach((it, idx) => {
						if (it.classmid == '产别') {
							this.chanbieList = it.classdetailList
						}
					})
				} else if (item.classname == '管理形式') {
					this.guanlixingshiList = item.classmidList
				} else if (item.classname == '终止原因') {
					this.zhongzhiList = item.classmidList
				} else if (item.classname == '档案变动') {
					item.classmidList.forEach((it, idx) => {
						if (it.classmid == '所档案变动') {
							this.biandongList = it.classdetailList
						}
					})
				}
			})
			this.blockGroupList()
		},

		methods: {
			// 管片列表
			blockGroupList() {
				let data = {
					group: '',
					groupNumber: '',
					houseAdmin: '',
					pageNum: '',
					pageSize: 99999
				}
				blockGroupList(data).then((res) => {
					this.guanpianList = res.data.list
				})
			},
			selectSuo(groupnew, index) {
				this.returnQuery()
				let data = {
					group: groupnew
				}
				getBlockByGroup(data).then((res) => {
					this.suoList = res.data
					this.index1 = index
					this.listQuery.groupNew = groupnew
					this.index2 = 99999
				})
			},
			selectSuo2(blockno, index) {
				this.index2 = index
				this.listQuery.blockno = blockno
			},
			returnQuery(){
				// this.listQuery.LivingWay = '',
				this.listQuery.groupNew = '',
				this.listQuery.blockno = '',
				this.listQuery.newManageWay = '',
				this.listQuery.oldManageWay = '',
				this.listQuery.oldOwnWay = '',
				this.listQuery.StopDate = '',
				this.listQuery.StopCause = '',
				this.listQuery.watertransferdate ='',
				this.index1 = 99999,
				this.index2 = 99999
			},
			save(){
				let data = this.listQuery
				data.StopDate = data.StopDate ? dayjs(data.StopDate).format('YYYY-MM-DD HH:mm:ss') : ''
				data.watertransferdate = data.watertransferdate ? dayjs(data.watertransferdate).format('YYYY-MM-DD HH:mm:ss') : ''
				console.log(data)
				if(this.radio == 1){
					manageWayDP(data).then((res) => {
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
					})
				}else if(this.radio == 2){
					cancelWayDP(data).then((res) => {
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
					})
				}else if(this.radio == 3){
					changeDP(data).then((res) => {
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
					})
				}else if(this.radio == 4){
					waterDP(data).then((res) => {
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
					})
				}
			}
		}
	}
</script>
<style scoped>
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.top {
		width: 100%;
		text-align: center;
	}

	.contents {
		width: 80%;
		display: flex;
		margin: 20px auto 0;
		justify-content: space-around;
	}

	.neirong {
		display: flex;
		border: 1px solid black;
		width: 90%;
		margin: 20px auto 0;
	}

	.neirongDiv {
		margin-top: 40px;
	}

	.left {
		display: flex;
		margin-top: 20px;
		margin-left: 40px;
		height: 150px;
		overflow-y: auto;
		width: 150px;
		background-color: #eff2f7;
	}

	.leftContent {
		width: 150px;
		background-color: #eff2f7;
	}

	.left2 {
		display: flex;
		margin-top: 20px;
		margin-left: 5px;
		height: 150px;
		overflow-y: auto;
		width: 250px;
		background-color: #eff2f7;
	}

	.leftContent2 {
		width: 200px;
		margin-left: 20px;
		background-color: #eff2f7;
	}

	.textblue {
		color: blue;
	}
.bottomTop {
  width: 95%;
  display: flex;
  justify-content: end;
	margin-top: 20px;
}
.publicpageview{
	background-color: #fff;
	box-sizing: border-box;
	padding-bottom: 20px;
}
</style>